<template>
 <div style="margin-top: 10px" class="app-contain">
   <div class="header">
      <div class="right">
        <el-button type="text" @click="() => { $router.push('/login') }">登录</el-button>
        <el-button type="text" @click="() => { $router.push('/register') }">注册</el-button>
      </div>
    </div>
    <div class="container">
      <div class="exam-header">
        <h3>{{ papertitle }}</h3>
        <span class="total">发布者：{{ paperauth }}</span>
        <span class="time">时间：{{ papertime }}</span>
      </div>
  <el-card>
    <div v-for="(item,index) in datalist" :key="item.id">
     <p  style="font-weight: 700">
      {{index + 1 + (queryParam.pageIndex-1)*queryParam.pageSize}}：
              <span v-if="item.type == 1">【单选】</span>
              <span v-if="item.type == 2">【多选】</span>
              <span v-if="item.type == 3">【填空】</span>
              <span v-if="item.type == 4">【解答】</span>

              <h4 v-html="item.content"></h4>
    </p>
   <div class="text-right">
       <el-button type="primary" v-if="showbutton == 1" @click="onShowAnswer(item.id)" size="mini">
        {{ findShowlist(item.id)<0 ? '显示答案' : '隐藏答案' }}
       </el-button>
    </div>
    <p>
        <p v-html="item.answer" v-if="findShowlist(item.id)>=0"></p>
    </p>
    <p v-if="findShowlist(item.id)>=0" class="bg-color">
        {{ item.summary }}
    </p> 
    <p v-if="findShowlist(item.id)<0" >
        <br/><br/>
    </p> 
    </div>
    <div class="text-center">
    <el-pagination background layout="total, prev, pager, next" 
    @current-change="handleCurrentChange"
    :page-size="queryParam.pageSize"
    :total="totalrecord"
    :current-page="queryParam.pageIndex" ></el-pagination>
    </div>
    </el-card>
    <div class="exam-footer">
    <el-button type="primary" @click="printAll">打印</el-button>
    <el-button >关闭</el-button>
    </div>
    </div>
</div>
</template>

<script>
import { ExamList, ExamListTest } from "@/api/examApi.js";

export default {
  name: "List",
  data() {
    return {
      codeid: "",
      queryParam: {
        code: 0,
        pageIndex: 1,
        pageSize: 6,
      },
      papertitle: "",
      paperauth: "",
      papertime: "",
      showbutton: 0,
      datalist: [],
      totalrecord:0,
      showlist: [],
    };
  },
  created() {
    let ids = this.$route.params.id;
    this.codeid = ids;
    //let name = this.$route.query.name;
    //console.log(name);
    // this.name = name;
    this.showlist=[];
    this.queryParam.code = ids;
    this.search();
  },
  methods: {
    search() {
      let _this = this;
      //alert(JSON.stringify(_this.queryParam))
      ExamList(_this.queryParam).then((response) => {
       // alert(JSON.stringify(response))
        const re = response;
        _this.papertitle = re.titel;
        _this.paperauth = re.auth;
        _this.papertime = re.time;
        _this.datalist = re.data;
        _this.showbutton = re.showanswer;
        _this.totalrecord = re.totalrecord;
        _this.queryParam.pageIndex = re.curpage;
        //alert(_this.totalrecord)
        //_this.queryParam.pageIndex = re.totalpage;
      });
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage){
        //console.log(newPage)
        this.queryParam.pageIndex = newPage;
        this.search()
    },
    onShowAnswer(id) {
      var ret = this.showlist.indexOf(id)
      if (ret == -1){
        this.showlist.push(id);
      }else{
        this.showlist.splice(ret,1);
      }
    },
    findShowlist(id) {
      var ret = this.showlist.indexOf(id)
      return ret;
    },
    printAll(){

    }
  },
};
</script>
<style scoped>
.header {
  display: flex;
  flex-direction: row-reverse;
}
.header .right {
  margin: 0 40px;
}
.header .el-button {
  flex: 1;
}
.container {
  margin: 0 auto;
  width: 1248px;
}
.exam-header {
  text-align: center;
  margin-bottom: 10px;
}
.exam-header .total {
  margin-right: 30px;
}
.exam-footer {
  text-align: center;
  margin-top: 20px;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.bg-color {
  margin: 0 0 10px;
  padding: 10px;
  background-color: #efefef;
  border-radius: 5px;
}
</style>
